<template>
  <div class="shop-cart">
    <nav-bar class="cart-nav">
      <div slot="center">购物车({{ goodsCount }})</div>
    </nav-bar>

    <scroll class="scroll" ref="scroll">
      <cart-list />
    </scroll>

    <cart-bottom-bar />
  </div>
</template>

<script>
  import NavBar from '../../components/common/navbar/NavBar.vue'
  import Scroll from '@commoncpn/scroll/Scroll.vue'

  import CartList from './components/CartList.vue'
  import CartBottomBar from './components/CartBottomBar.vue'

  import { mapGetters } from 'vuex'

  export default {
    name: 'shop-cart',
    components: { NavBar, CartList, Scroll, CartBottomBar },
    computed: {
      ...mapGetters(['goodsCount'])
    },
    mounted() {
      this.$bus.$on('cartImgLoad', () => {
        this.$refs.scroll.refresh()
      })
    },
    activated() {
      this.$refs.scroll.refresh()
    }
  }
</script>

<style lang="less" scoped>
  .cart-nav {
    color: #fff;
    background-color: var(--color-tint);
  }
  .scroll {
    height: calc(100vh - 126px);
  }
</style>
